<template>
  <view class="notifications-container">
    <!-- 消息类型切换 -->
    <view class="tab-header">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'system' }"
        @click="activeTab = 'system'"
      >
        <text>系统消息</text>
        <view class="tab-line" v-if="activeTab === 'system'"></view>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'interact' }"
        @click="activeTab = 'interact'"
      >
        <text>互动消息</text>
        <view class="tab-line" v-if="activeTab === 'interact'"></view>
      </view>
    </view>
    
    <!-- 消息列表 -->
    <scroll-view 
      class="message-scroll" 
      scroll-y
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 系统消息 -->
      <view class="message-list" v-if="activeTab === 'system'">
        <view 
          class="message-item"
          v-for="msg in systemMessages"
          :key="msg.id"
          :class="{ unread: !msg.read }"
          @click="readMessage(msg)"
        >
          <view class="message-icon">
            <u-icon :name="msg.icon" size="40" color="#3a8838"></u-icon>
          </view>
          <view class="message-content">
            <view class="message-title">
              <text>{{msg.title}}</text>
              <text class="message-time">{{msg.time}}</text>
            </view>
            <text class="message-desc">{{msg.content}}</text>
          </view>
        </view>
      </view>
      
      <!-- 互动消息 -->
      <view class="message-list" v-if="activeTab === 'interact'">
        <view 
          class="message-item"
          v-for="msg in interactMessages"
          :key="msg.id"
          :class="{ unread: !msg.read }"
          @click="readMessage(msg)"
        >
          <image class="user-avatar" :src="msg.avatar" mode="aspectFill"></image>
          <view class="message-content">
            <view class="message-title">
              <text>{{msg.username}}</text>
              <text class="message-time">{{msg.time}}</text>
            </view>
            <text class="message-desc">{{msg.content}}</text>
            
            <!-- 互动内容预览 -->
            <view class="interact-preview" v-if="msg.preview">
              <image 
                v-if="msg.type === 'photo'"
                :src="msg.preview" 
                mode="aspectFill"
              ></image>
              <view 
                v-else-if="msg.type === 'album'"
                class="album-preview"
              >
                <text>{{msg.albumName}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="isLoading">
        <u-loading-icon mode="circle" size="24" color="#999"></u-loading-icon>
        <text>加载中...</text>
      </view>
      
      <!-- 无数据提示 -->
      <view class="empty-tip" v-if="showEmpty">
        <u-icon name="info-circle" size="80" color="#ccc"></u-icon>
        <text>暂无消息</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'system',
      isRefreshing: false,
      isLoading: false,
      systemMessages: [
        {
          id: 1,
          icon: 'bell',
          title: '系统更新提醒',
          content: '相册系统已更新到最新版本，新增照片回忆功能',
          time: '10分钟前',
          read: false
        },
        {
          id: 2,
          icon: 'heart',
          title: '回忆提醒',
          content: '看看去年今日的美好回忆吧',
          time: '1小时前',
          read: true
        },
        {
          id: 3,
          icon: 'cloud-upload',
          title: '备份完成',
          content: '您有36张照片已完成云端备份',
          time: '2小时前',
          read: true
        }
      ],
      interactMessages: [
        {
          id: 1,
          username: '阳光摄影',
          avatar: '/static/src.png',
          content: '赞了你的照片',
          time: '5分钟前',
          type: 'photo',
          preview: '/static/src.png',
          read: false
        },
        {
          id: 2,
          username: '旅行者',
          avatar: '/static/src.png',
          content: '评论了你的相册',
          time: '1小时前',
          type: 'album',
          albumName: '春日游记',
          read: true
        }
      ]
    }
  },
  computed: {
    showEmpty() {
      return this.activeTab === 'system' ? 
        this.systemMessages.length === 0 : 
        this.interactMessages.length === 0;
    }
  },
  methods: {
    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true;
      await this.loadData();
      this.isRefreshing = false;
    },
    
    // 加载更多
    loadMore() {
      if (this.isLoading) return;
      this.isLoading = true;
      
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    
    // 读取消息
    readMessage(msg) {
      msg.read = true;
      // 这里可以添加跳转到相关内容的逻辑
      if (msg.type === 'photo') {
        uni.navigateTo({
          url: `/pages/photo/detail?id=${msg.id}`
        });
      } else if (msg.type === 'album') {
        uni.navigateTo({
          url: `/pages/album/detail?id=${msg.id}`
        });
      }
    },
    
    // 加载数据
    async loadData() {
      await new Promise(resolve => setTimeout(resolve, 1000));
    }
  }
}
</script>

<style>
.notifications-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

/* 顶部切换栏样式 */
.tab-header {
  display: flex;
  background-color: #fff;
  padding: 20rpx 40rpx;
  position: sticky;
  top: var(--window-top);
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  text-align: center;
  position: relative;
  padding: 20rpx 0;
}

.tab-item text {
  font-size: 28rpx;
  color: #666;
  transition: color 0.3s;
}

.tab-item.active text {
  color: #3a8838;
  font-weight: bold;
}

.tab-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #3a8838;
  border-radius: 2rpx;
}

/* 消息列表样式 */
.message-scroll {
  height: calc(100vh - 88rpx - var(--window-top));
}

.message-list {
  padding: 20rpx;
}

.message-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: flex-start;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.message-item.unread {
  background-color: #f0f8f0;
}

.message-icon {
  margin-right: 20rpx;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 40rpx;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-right: 20rpx;
}

.message-content {
  flex: 1;
}

.message-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.message-title text:first-child {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.message-time {
  font-size: 24rpx;
  color: #999;
}

.message-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

/* 互动内容预览 */
.interact-preview {
  margin-top: 15rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.interact-preview image {
  width: 120rpx;
  height: 120rpx;
}

.album-preview {
  background-color: #f5f5f5;
  padding: 15rpx;
  border-radius: 8rpx;
}

.album-preview text {
  font-size: 24rpx;
  color: #666;
}

/* 加载更多和空状态提示 */
.loading-more {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rpx;
}

.empty-tip {
  padding: 100rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}
</style> 